// 高阶组件它就是一个函数，此函数需要你通过形参传入一个组件给此函数，此函数返回一个新的组件
import React, { Component } from 'react'

// 形参一定要传入一个组件，返回一个增强后的组件
// 注：如果使用了高阶组件包裹组件，则一定要手动把原来的props向下传递
// const withLayout = (Cmp) => {
//   return class HocLayout extends Component {
//     render() {
//       console.log('hoc -- props', this.props)
//       return (
//         <>
//           <div className="header">我是导航</div>
//           {/* 手动去指定的场景，一般用于高阶组件去拦截一些不需要传递数据属性, 一般也不会这样去写 */}
//           {/* <Cmp name={this.props.name} /> */}
//           {/* 全部传下去 -- 只要你用到了自定义的高阶组件则一定要写此句 ...this.props */}
//           <Cmp {...this.props} />
//           <div className="footer">底部声明</div>
//         </>
//       )
//     }
//   }
// }

// const withLayout = (Cmp) => {
//   // 匿名类
//   return class extends Component {
//     render() {
//       console.log('hoc -- props', this.props)
//       return (
//         <>
//           <div className="header">我是导航</div>
//           {/* 手动去指定的场景，一般用于高阶组件去拦截一些不需要传递数据属性, 一般也不会这样去写 */}
//           {/* <Cmp name={this.props.name} /> */}
//           {/* 全部传下去 -- 只要你用到了自定义的高阶组件则一定要写此句 ...this.props */}
//           <Cmp {...this.props} />
//           <div className="footer">底部声明</div>
//         </>
//       )
//     }
//   }
// }

// 返回函数组件
// const withLayout = (Cmp) => {
//   return (props) => {
//     return (
//       <>
//         <div className="header">我是导航</div>
//         {/* 手动去指定的场景，一般用于高阶组件去拦截一些不需要传递数据属性, 一般也不会这样去写 */}
//         {/* <Cmp name={this.props.name} /> */}
//         {/* 全部传下去 -- 只要你用到了自定义的高阶组件则一定要写此句 ...this.props */}
//         <Cmp {...props} />
//         <div className="footer">底部声明</div>
//       </>
//     )
//   }
// }

// 返回的jsx中没有过多的业务代码可以直接返回
// const withLayout = (Cmp) => (props) =>
//   (
//     <>
//       <div className="header">我是导航</div>
//       {/* 手动去指定的场景，一般用于高阶组件去拦截一些不需要传递数据属性, 一般也不会这样去写 */}
//       {/* <Cmp name={this.props.name} /> */}
//       {/* 全部传下去 -- 只要你用到了自定义的高阶组件则一定要写此句 ...this.props */}
//       <Cmp {...props} />
//       <div className="footer">底部声明</div>
//     </>
//   )

// withLayout(100)(Child) 调用的方式
// const withLayout = (num) => (Cmp) => (props) =>
//   (
//     <>
//       <div className="header">我是导航 -- {num}</div>
//       <Cmp {...props} />
//       <div className="footer">底部声明</div>
//     </>
//   )
const withLayout = (num) => (Cmp) => {
  return class extends Component {
    render() {
      return (
        <>
          <div className="header">我是导航 -- {num}</div>
          <Cmp {...this.props} />
          <div className="footer">底部声明</div>
        </>
      )
    }
  }
}
export default withLayout
